<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- React核心包 最先引入 提供一个对象React -->
  <script src="../../../React/react.development.js"></script>
  <!-- React操作DOM的包 提供一个一个对象ReactDOM -->
  <script src="../../../React/react-dom.development.js"></script>
  <!-- 引入babel，用户解析jsx为js -->
  <script type="text/javascript" src="../../../React/babel.min.js"></script>
  <title>Document</title>
  <style>
    .one {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <!-- 用于动态构建用户界面的 JavaScript 库(只关注于视图)
是一个将数据渲染为HTML视图的开源JavaScript库 -->
  <script type="text/babel">
    // 如果需要对当前的script内部就行jsx编译则需要设置script的type属性
    // React对象上有一个createElement方法可以创建虚拟DOM
    //     - 参数1: 元素名称
    //     - 参数2: 元素上的属性, 对象类型(id class)
    //     - 参数3: 元素的子节点
    // 创建虚拟
    // const re = React.createElement('div', {}, 'react')
    // 使用jsx方式创建一个虚拟DOM
    // 注意:在jsx语法中class是关键字 最好用className书写
    // const re = (<div className='one'>
    //   <p>react</p>
    //   <p>学习</p>
    // </div>)
    /*jsx语法1:
                虚拟DOM中要混入js表达式,要用{},{}中只能写变量和表达式,不能书写语句
      jsx语法2:   
                指定样式的类名不要用class,必须用className,指定for属性要用htmlFor(避免和关键字冲突)
                在书写style行内样式的时候,style希望接受的是一个对象格式
                font-size-->fontSize
      jsx语法3:
                jsx中所有的元素都要闭合
                jsx语法外层必须有其只有一个外层父元素
                标签的首字母
                  如果是小写,则认为是html提供的标签
                  如果是大写,则认为是一个组件
                jsx中注释:{把注释放/中间/}
      jsx的插值语法汇总不能放对象和函数,如果要放一个数据的集合可以使用数组
                */
    const arr = ['肖战', '吴亦凡', '周冬雨', '丁真']
    // 用{}包住表达式
    const re = (<ul style={{ color: 'red', fontSize: '100px' }}>{arr.map(item => <li>{item}</li>)} </ul>)
    ReactDOM.createRoot(document.getElementById('app')).render(re)

  </script>

</body>

</html>